<template>
  <div class="select-box">
    <!-- 搜索         -->
    <div class="search df">
      <el-autocomplete
        v-model="searchVal"
        clearable
        :fetch-suggestions="searchKeyInput"
        placeholder="请输入大学名称"
        @select="onClickSearchItem"
        value-key="cnName"
      >
        <template #prefix>
          <el-icon class="el-input__icon">
            <search />
          </el-icon>
        </template>
      </el-autocomplete>
    </div>
    <div v-if="changeSchool.length > 0" class="schoolArr">
      <el-checkbox-group v-model="checked3" @change="changeCheckboxSchool">
        <el-checkbox
          v-for="(item, index) in changeSchool"
          :key="index"
          :label="item.name"
          :value="item.id"
        >
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div
      v-if="changeSchool.length > 0"
      class="clearSchool"
      @click="dialogVisible = true"
    >
      <el-icon><Delete /></el-icon>
      <span style="margin-left: 5px">清除</span>
    </div>
  </div>
  <!-- 清除二次确认弹窗 -->
  <div class="noBody">
    <el-dialog
      v-model="dialogVisible"
      title="您确定要清除所有数据吗？"
      width="500"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" size="large"
            >取消</el-button
          >
          <el-button type="primary" @click="clearSchool" size="large">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="cnName" label="院校及招生方向" width="700">
      <template #default="scope">
        <span>{{ scope.row.cnName }}</span>
        <br />
        <span
          v-for="(item, index) in scope.row.features"
          style="
            font-size: 12px;
            font-weight: 400;
            color: var(--text-placeholder-color);
            margin-right: 5px;
          "
          >{{ item }}</span
        >
      </template>
    </el-table-column>
    <!-- 易度排名 -->
    <!-- <el-table-column prop="rankingOfEdu" label="易度排名">
      <template #header>
        <div
          style="display: flex; align-items: center; cursor: pointer"
          :class="{ active: activeColumn === 'rankingOfEdu' }"
          @click="setActiveColumn('rankingOfEdu')"
        >
          <span>易度排名</span>
          <el-icon size="16" style="margin-left: 3px">
            <Bottom />
          </el-icon>
        </div>
      </template>
    </el-table-column> -->

    <!-- 校友会 -->
    <el-table-column prop="rankingOfXYH" label="校友会">
      <template #default="scope">{{
        scope.row.rankingOfXYH > 0 ? scope.row.rankingOfXYH : '-'
      }}</template>
      <template #header>
        <div
          style="display: flex; align-items: center; cursor: pointer"
          :class="{ active: activeColumn === 'rankingOfXYH' }"
          @click="setActiveColumn('rankingOfXYH')"
        >
          <span>校友会</span>
          <el-icon size="16" style="margin-left: 3px">
            <Sort />
          </el-icon>
        </div>
      </template>
    </el-table-column>

    <!-- 软科 -->
    <el-table-column prop="rankingOfRK" label="软科">
      <template #default="scope">{{
        scope.row.rankingOfRK > 0 ? scope.row.rankingOfRK : '-'
      }}</template>
      <template #header>
        <div
          style="display: flex; align-items: center; cursor: pointer"
          :class="{ active: activeColumn === 'rankingOfRK' }"
          @click="setActiveColumn('rankingOfRK')"
        >
          <span>软科</span>
          <el-icon size="16" style="margin-left: 3px">
            <Sort />
          </el-icon>
        </div>
      </template>
    </el-table-column>

    <!-- QS -->
    <el-table-column prop="rankingOfQS" label="QS">
      <template #default="scope">{{
        scope.row.rankingOfQS > 0 ? scope.row.rankingOfQS : '-'
      }}</template>
      <template #header>
        <div
          style="display: flex; align-items: center; cursor: pointer"
          :class="{ active: activeColumn === 'rankingOfQS' }"
          @click="setActiveColumn('rankingOfQS')"
        >
          <span>QS</span>
          <el-icon size="16" style="margin-left: 3px">
            <Sort />
          </el-icon>
        </div>
      </template>
    </el-table-column>

    <!-- USNews -->
    <el-table-column prop="rankingOfUSNews" label="USNews">
      <template #default="scope">{{
        scope.row.rankingOfUSNews > 0 ? scope.row.rankingOfUSNews : '-'
      }}</template>
      <template #header>
        <div
          style="display: flex; align-items: center; cursor: pointer"
          :class="{ active: activeColumn === 'rankingOfUSNews' }"
          @click="setActiveColumn('rankingOfUSNews')"
        >
          <span>USNews</span>
          <el-icon size="16" style="margin-left: 3px">
            <Sort />
          </el-icon>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="right" style="margin-top: 20px">
    <el-pagination
      v-model:current-page="pageData.page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="getSchoolScorelineList"
    />
  </div>
</template>
<script setup>
import {
  // searchSchool
  searchSchool2,
} from '@/api/appv2/appv1.js';
import { ref, onMounted } from 'vue';
import { throttle } from 'lodash';
const checked3 = ref([]);
const searchVal = ref(''); // 搜索值
const changeSchool = ref([]);
const tableData = ref([]);
const activeColumn = ref('rankingOfEdu');
const total = ref(0);
const pageData = reactive({
  page: 1,
  pageSize: 10,
  ssearch: '',
});
const orderBy = ref('asc');
const getSchoolScorelineList = (e) => {
  pageData.page = e;
  universityRankings();
};
// 搜索输入值改变
const searchKey = ref(''); //记录上一次的输入值
const searchKeyArr = ref([]); //记录上一次接口返回的结果
const searchKeyInput = throttle((val, cb) => {
  //输入值没变时就用上一次接口的结果
  if (searchKey.value && searchKey.value == val) {
    cb(searchKeyArr.value);
    return;
  }
  if (val.length >= 2) {
    searchSchool2({
      search: val,
      pageSize: 1000,
      studentId: localStorage.getItem('student_id'),
    }).then((res) => {
      searchKey.value = val;
      searchKeyArr.value = res.data;
      cb(res.data);
    });
  } else {
    cb([]);
  }
}, 800);
const changeCheckboxSchool = (e) => {
  if (e && e.length > 0) {
    // 将选中的学校ID用逗号隔开
    pageData.scode = e.join(',');
    // 调用大学排名的函数
    universityRankings();
  } else {
    pageData.scode = '';
    universityRankings();
  }
};
const onClickSearchItem = (e) => {
  const isDuplicate = changeSchool.value.some((item) => item.id === e.code);

  // 如果没有重复，则添加新学校
  if (!isDuplicate) {
    changeSchool.value.push({
      name: e.cnName,
      id: e.code,
    });
  }
  checked3.value.push(e.code);

  // 清空搜索值
  searchVal.value = '';
  pageData.scode = checked3.value.join(',');
  // 调用大学排名的函数
  universityRankings();
};
//大学排名
const universityRankings = () => {
  searchSchool2(pageData)
    .then((res) => {
      if (res.code == 20000) {
        tableData.value = res.data;
        total.value = Number(res.total);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const setActiveColumn = (e) => {
  activeColumn.value = e;
  pageData.sort = e;
  // 排序传参
  orderBy.value = orderBy.value == 'asc' ? 'desc' : 'asc';
  pageData.orderBy = orderBy.value;

  universityRankings();
};

//清除
const dialogVisible = ref(false);
const clearSchool = () => {
  changeSchool.value = [];
  pageData.scode = '';
  dialogVisible.value = false;
  checked3.value = [];
  universityRankings();
};

onMounted(() => {
  universityRankings();
});
</script>

<style lang="scss" scoped>
.select-box {
  display: flex;
  flex-direction: row;
  padding: 20px 0;
  top: 120px;
  z-index: 100;
  background-color: #fff;
  align-items: flex-start;
  .search {
    margin: 0 10px;
    width: 240px;
  }
  .schoolArr {
    flex: 1;
  }
  .clearSchool {
    width: fit-content;
    font-size: 14px;
    color: #4e5969;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.noBody {
  .el-button {
    width: 210px;
  }
  :deep(.el-dialog__header) {
    border: none;
  }
  :deep(.el-dialog__footer) {
    border: none;
  }
}

.active {
  color: #409eff; /* 改变颜色，选中时显示蓝色 */
}
</style>
